// imrc
import React, { Component } from 'react'
// cc
class Counter extends Component {
  state = {}
  // constructor(props) {
  //   super(props)
  //   // way 1 :for bind this
  //   // this.handleDelete = this.handleDelete.bind(this)
  // }
  // 设置样式
  buttonStyle = {
    // fontSize: 10,
    // fontWeight: 'bold'
    marginLeft: '10px'
  }
  // way 2 (Recommand) : Use Arrow Function
  // handleDelete = () => {
  //   console.log('Increament', this)
  //   this.setState({
  //     value: this.state.counter.value + 1
  //   })
  // }

  render() {
    let classes = this.getBadgeClasses()
    return (
      <div>
        {/* {this.props.children} */}
        <span className={classes}>{this.formatCount()}</span>
        <button
          style={this.buttonStyle}
          type="button"
          className="btn btn-secondary btn-sm m-2"
          onClick={() => this.props.onIncrement(this.props.counter)}
        >
          Increment
        </button>
        <button
          style={this.buttonStyle}
          type="button"
          className="btn btn-danger btn-sm m-2"
          onClick={() => this.props.onDelete(this.props.counter.id)}
        >
          Delete
        </button>
      </div>
    )
  }

  getBadgeClasses() {
    let classes = 'badge m-2 badge-'
    classes += this.props.counter.value === 0 ? 'warning' : 'primary'
    return classes
  }

  formatCount() {
    const { value } = this.props.counter
    return value === 0 ? 'Zero' : value
  }
}

export default Counter
